
.heroes {
  margin: 0 0 2em 0;
  padding: 0;
  width: 15em;
  list-style-type: none;

  li {
    position: relative;
    left: 0;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
    background-color: #EEE;
    cursor: pointer;

    &:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }

    &.selected {
      background-color: #CFD8DC;
      color: white;
    }

    &.selected:hover {
      background-color: #BBD8DC;
      color: white;
    }

    .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  }
}
